<template>
    <div id="tmpl">
<div id="cate">
  <ul v-bind="{style:'width:'+width+'px'}">
    <li>全部</li>
    <li v-for="item in list">{{item.category}}</li>
  </ul>
</div>
      <div id="imglist">
        <ul>
          <li v-for="item in imgData">
            <router-link v-bind="{to:'/photo/photoinfo/'+item.ID}">
            <img v-lazy="item.img_url">
            <div id="desc">{{item.title}}</div>
            </router-link>
          </li>
        </ul>

      </div>
    </div>
</template>

<script>
  import { Lazyload } from 'mint-ui';
    export default{
        data(){
            return {
                list:[],
              width:320,
              imgData:[]
            }
        },
      mounted(){
            this.getCate();
            this.getImg();
      },
      methods:{
          getCate(){
            this.$http.get('/api/category').then(res=>{
                this.list=res.data;
                let count=res.data.length+1;
                let w=82;
             this.width=w*count;
            })
          },
        getImg(){
          this.$http.get('/api/getImg').then(res=>{
            this.imgData=res.data;
          })
        },
      }
    }
</script>

<style scoped>
  #cate{
    max-width: 320px;
    width: 320px;
    overflow-x: auto;
  }
  #cate ul{
margin:0;
    padding-left: 10px;
  }
#cate li{

  list-style: none;
  display: inline-block;
  color:#0094ff
}
  image[lazy=loading] {
    width: 40px;
    height: 300px;
    margin: auto;
  }
  #imglist ul{
    padding-left: 0;

  }
  #imglist li{
    list-style: none;
    position: relative;

  }
  #imglist img{
    width: 100%;
  }
  #desc{
    background-color: rgba(0,0,0,0.2);
    color: white;
    position: absolute;
    bottom: 5px;
    left:0

  }
</style>
